<template>
  <div class="Project">
    <Row>
      <template v-if="!disappear">
        <Col span="6" style="margin-top:30px;margin-left:10px">
        <Menu :accordion='true'>
          <!-- 全部分类 -->
          <MenuItem :name="categoriesData[0]._id">
          <div @click='btnActionClass(categoriesData[0])'>
            <Icon type="ios-analytics" /> {{categoriesData[0].name}}
          </div>
          </MenuItem>
          <!-- 循环产生侧边导航栏 -->
          <template v-for="categoriesDatas in this.categoriesData" v-if="categoriesDatas._id !== 'all'">
            <Submenu :name="categoriesDatas._id">
              <template slot="title">
                <Icon type="ios-analytics" /> {{categoriesDatas.name}}
              </template>
              <template v-for="smallcategories in categoriesDatas.children">
                <MenuItem :name="smallcategories._id">
                <div @click='btnActionClass(smallcategories)'>
                  <Icon type="md-document" /> {{smallcategories.name}}
                </div>
                </MenuItem>
              </template>
            </Submenu>
          </template>
        </Menu>
        </Col>
        <Col span="16" style="margin-top:10px;margin-left:20px">
        <!-- 顶部按钮和分页 -->
        <Row>
          <Col span="24">
          <Divider>
            <h1>{{this.name}}</h1>
          </Divider>
          </Col>
          <Col span='24' style="margin-top:10px;margin-bottom:20px;">
          <Row>
            <Col span="20">
            <Poptip trigger="hover" content="点击收起导航栏">
              <Button type="info" @click="btnActionSider">
                <Icon type="ios-arrow-back" />
              </Button>
            </Poptip>
            </Col>
            <Col span='1'>
            <Select v-model="params.sort" style="width:100px;margin-left:27px" size='small' @on-change='changeSort' placeholder="默认排序">
              <Option v-for="sorts in sortselect" :value="sorts._id" :key="sorts._id">{{ sorts.name }}</Option>
            </Select>
            </Col>
          </Row>
          </Col>
          <!-- 表格 -->
          <Col span="24">
          <template>
            <Table :columns='tableTitle' :data='projectData' border size='large'></Table>
          </template>
          </Col>
          <!-- 分页 -->
          <Col span="24" style="margin-top:20px;margin-bottom:20px;margin-left:300px">
          <Page :current="this.params.page" :total="parseInt(this.total)" simple :page-size='this.params.limit' @on-change='changePage'
          />
          </Col>
        </Row>
        </col>
      </template>

      <template v-else>
        <Col span="23" style="margin-top:10px;margin-left:20px">
        <!-- 顶部按钮和分页 -->
        <Row>
          <Col span="24">
          <Divider>
            <h1>{{this.name}}</h1>
          </Divider>
          </Col>
          <Col span='24' style="margin-top:10px;margin-bottom:20px;">
          <Row>
            <Col span="21">
            <Poptip trigger="hover" content="点击展开导航栏">
              <Button type="info" @click="btnActionSider">
                <Icon type="ios-arrow-forward" />
              </Button>
            </Poptip>
            </Col>
            <Col span='1'>
            <Select v-model="params.sort" style="width:100px;margin-left:35px" size='small' @on-change='changeSort' placeholder="默认排序">
              <Option v-for="sorts in sortselect" :value="sorts._id" :key="sorts._id">{{ sorts.name }}</Option>
            </Select>
            </Col>
          </Row>
          </Col>
          <!-- 表格 -->
          <Col span="24">
          <template>
            <Table :columns='tableTitleMore' :data='projectData' border size='large'></Table>
          </template>
          </Col>
          <!-- 分页 -->
          <Col span="24" style="margin-top:20px;margin-bottom:20px;margin-left:480px">
          <Page :current="this.params.page" :total='this.total' simple :page-size='this.params.limit' @on-change='changePage' />
          </Col>
        </Row>
        </col>
      </template>
    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        // id: this.$route.params.id,        //根据路由传进来的数据，表示的类的ClassId

        // 控制侧边栏显示
        disappear: false,
        //接口
        url: {
          projectClass: this.$Global.url.projectClass,
          categories: this.$Global.url.categories
        },

        //页面请求参数数据
        params: {
          limit: 10,        //默认页数限制
          level: 0,         //查询层级
          page: 1,          //默认页数
          sort: 0,          //默认排序方式
          classId: "all"    //分类ID
        },



        name: "全部分类",

        //排序方式
        sortselect: [
          {
            name: "",
            _id: ""
          }
        ],

        //总方案数
        total: "",

        //接受的方案数据
        projectData: [
          {
            titleName: "",
            project_id: "",
            feature: [],
            icon: "",
            function: [],
          }
        ],

        //存放产品信息
        categoriesData: [
          { name: "", _id: "" }
        ],



        // 表格数据
        tableTitle: [
          {
            title: "方案名称",
            key: "titleName"
          },
          // {
          //   title: '方案 ID',
          //   align: 'center',
          //   key: 'project_id'
          // },
          {
            title: "特点",
            key: "feature",
            align: "center",
            render: this.renderFeature
          }
        ],

        //表格的查看详情按钮
        tableTitleBtn: [
          {
            title: "查看详情",
            key: "action",
            width: 150,
            align: "center",
            render: this.renderDetailInfo
          }
        ],
        //更多的表格数据
        tableTitleMore: [
          {
            title: "功能",
            key: "function",
            align: "center",
            render: this.renderFunctions
          },
          {
            title: "推荐星数",
            align: "center",
            key: "recommend",
            render: this.renderRate
          },
          {
            title: "图片",
            key: "icon",
            align: "center",
            render: this.renderPicture
          }
        ]
      };
    },

    /**
     * 页面入口
     */
    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.projectClass =
          this.$Global.url.baseUrl + this.$Global.url.projectClass;
        this.url.categories =
          this.$Global.url.baseUrl + this.$Global.url.categories;
      }

      // 拼接数组,增加表格的头部的内容
      this.tableTitleMore = this.tableTitle.concat(
        this.tableTitleMore.concat(this.tableTitleBtn)
      );
      this.tableTitle = this.tableTitle.concat(this.tableTitleBtn);

      //获取数据
      if (this.$route.params.level == undefined) {
        this.getData();
      }
      else {
        this.params.level = this.$route.params.level;
        this.params.classId = this.$route.params.classId;
        this.name = this.$route.params.className;;
        this.saveData(this.name);
      }

      this.getClassData();
      this.getCategories();

      //
    },

    /**
     * 方法
     */
    methods: {
      /**************************************************获取处理**************************************** */
      /**
       * 获取侧边导航栏信息
       */
      getCategories() {
        this.$http
          .get(this.url.categories)
          .then(res => {
            // console.log(this.limit);
            if (res.status == 200) {
              this.categoriesData = res.data.categories;
              this.sortselect = res.data.sort;
              // console.log(this.sort)
            }
          })
          .catch(error => console.log(error));
      },
      /**
       * 获取方案信息
       */
      getClassData() {
        this.$http
          .get(this.url.projectClass, { params: this.params })
          .then(res => {
            if (res.status == 200) {
              this.projectData = res.data.docs;
              this.page = res.data.page;
              this.total = res.data.total;
            }
          })
          .catch(error => console.log(error));
      },

      /*****************************************************数据处理********************************************** */
      /**
       * 将参数存入缓存
       * @param {方案的名字} name
       */
      saveData(name) {
        sessionStorage.setItem("level", this.params.level);
        sessionStorage.setItem("name", name);
        sessionStorage.setItem("classId", this.params.classId);
      },

      /**
       * 从缓存中读取数据
       */
      getData() {
        if (sessionStorage.getItem("classId")) {
          this.params.level = sessionStorage.getItem("level");
          this.params.classId = sessionStorage.getItem("classId");
          this.name = sessionStorage.getItem("name");
        }
      },
      /************************************************点击侧边栏获取数据*********************************/
      /**
       * 查询全部
       * @param {方案的名字和 ID} data
       */
      btnActionClass(data) {
        if (data._id == "all") {
          this.params.level = 0;
        } else if (data.name == "全部分类") {
          this.params.level = 1;
        } else {
          this.params.level = 2;
        }
        this.name = data.name;
        this.params.classId = data._id;
        this.params.page = 1;
        this.saveData(this.name);
        this.getClassData();
      },

      /**************************************************************表格渲染**************************************/
      /**
       * 渲染出表格里的方案特点
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */

      renderFeature(h, params) {
        return h(
          "Poptip",
          {
            props: {
              trigger: "hover",
              title: "方案特点",
              placement: "bottom"
            }
          },
          [
            h("Tag", { props: { color: "orange" } }, "查看方案特点"),
            h("div", { slot: "content" }, [
              h(
                "ul",
                this.projectData[params.index].feature.map(item => {
                  return h(
                    "li",
                    { style: { textAlign: "left", padding: "4px" } },
                    item
                  );
                })
              )
            ])
          ]
        );
      },

      /**
       * 显示方案功能
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderFunctions(h, params) {
        return h(
          "Poptip",
          {
            props: {
              trigger: "hover",
              title: "功能",
              placement: "bottom"
            }
          },
          [
            h("Tag", { props: { color: "orange" } }, "查看方案功能"),
            h("div", { slot: "content" }, [
              h(
                "ul",
                this.projectData[params.index].function.map(item => {
                  return h(
                    "li",
                    { style: { textAlign: "left", padding: "4px" } },
                    item
                  );
                })
              )
            ])
          ]
        );
      },

      /**
       * 渲染出表格里的图片
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderPicture(h, params) {
        return h("Poptip", { props: { trigger: "hover", placement: "bottom" } }, [
          h("Tag", { props: { color: "magenta" } }, "查看图片"),
          h("div", { slot: "content" }, [
            h("img", { attrs: { src: this.projectData[params.index].icon } })
          ])
        ]);
      },

      /**
       * 渲染表格里的按钮
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderDetailInfo(h, params) {
        return h("div", [
          h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small"
              },
              style: {
                marginRight: "5px"
              },
              on: {
                click: () => {
                  this.btnActionDetail(params.index);
                }
              }
            },
            "查看详细信息"
          )
        ]);
      },

      /**
       * 在表格里渲染出星级评分
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderRate(h, params) {
        return h("div", [
          h("Rate", {
            props: {
              count: 5,
              value: this.projectData[params.index].recommend,
              disabled: true
            }
          })
        ]);
      },
      /****************************************************其他按钮行为***********************/
      /**
       * 显示或隐藏侧边栏
       */
      btnActionSider() {
        this.disappear = !this.disappear;
        // sessionStorage.setItem('show',this.disappear)
      },

      /**
       * 跳转至产品详细页面
       * @param {指向当前行} index
       */
      btnActionDetail(index) {
        var param = {
          projectid: this.projectData[index].project_id
        };
        this.$router.push({ name: "ProjectDetailInfo", params: param });
      },

      /**
       * 页数跳转
       * @param {事件返回的数据,指向当前页数} page
       */
      changePage(page) {
        this.params.page = page;
        // sessionStorage.setItem('page', this.page);
        // this.$store.commit('setParams');
        //点击按钮后返回顶部
        var backtop = setInterval(function () {
          document.documentElement.scrollTop = document.documentElement.scrollTop - 20;
          if (document.documentElement.scrollTop <= 0) {
            clearInterval(backtop)
          }
        }, 4)
        this.getClassData();
      },

      /**
       * 更换排序方式 
       * @param {事件返回的数据,表示选择器当前选项} val
       */
      changeSort(val) {
        this.params.sort = val;
        // sessionStorage.setItem('sort', this.sortselect);
        // this.$store.commit('setParams');
        this.getClassData();
        // console.log(val)
        // console.log(this.params.sort)
      }
    }

  };
</script>


<style>
</style>